<template>
  <div class="class">
    <h1 class="h2">2022年6月</h1>
    <div class="top">
      <ul class="ul">
        <li v-for="(item, index) in tabList.list1" :key="index">
          <div>{{ item }}</div>
        </li>
        <li v-for="(item, index) in tabList.list2" :key="index">
          <div>{{ item }}</div>
        </li>
      </ul>
    </div>
    <!-- 课程 -->
    <div class="course">
      <div class="course-title">
        <div>今日课程(<span style="color: #f15a24">0</span>节)</div>
        <div>
          <img src="../assets/日历.png" alt="" @click="toTimetable" />
        </div>
      </div>
      <!--  -->
      <div class="course-a">
        <ul class="ul1">
          <li>
            <img
              src="https://wap.lexuemiao.com/img/history-full@3x.fd48535a.png
"
              alt=""
            />
            <div>学习记录</div>
          </li>
          <li>
            <img
              src="https://wap.lexuemiao.com/img/ziliao@3x.6d7c3da4.png"
              alt=""
            />
            <div>学习资料</div>
          </li>
        </ul>
      </div>
      <div class="course-b">
        <h2 class="h2">正在学习的课程</h2>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const tabList = reactive({
  list1: ["日", "一", "二", "三", "四", "五", "六"],
  list2: ["12", "今", "14", "15", "16", "17", "18"],
});
// const tabActive = ref(2);
const toTimetable = () => {
  router.push("./timetable");
};
</script>
<style lang="scss" scoped>
.class {
  font-size: 18px;
}
.h2 {
  color: #424963;
  margin: 0;
  padding: 10px;
}
.top {
  font-size: 15px;
  font-weight: 600;
  color: #424963;
  margin: 20px;
  margin-bottom: 70px;
  .ul {
    display: flex;
    //  flex-wrap: wrap;
    li {
    }
  }
}
.course {
  margin: 10px 20px;

  .course-title {
    padding: 10px;
    padding-left: 30px;
    display: flex;
    justify-content: space-between;
    background-color: #f5f6f8;
    padding-right: 10px;
    height: 70px;
    line-height: 70px;
    border-radius: 10px;
    div {
      img {
        width: 60px;
        height: 60px;
      }
    }
  }
}
.ul1 {
  margin-top: 40px;
  margin-bottom: 40px;
  display: flex;
  justify-content: space-around;
  li {
    img {
      width: 120px;
      height: 120px;
    }
  }
}
</style>